<!--连接操作-->
<template>
  <div class="manage">
    <el-row>
      <!--左侧数据库表名列表-->
      <el-col :span="4">
        <el-tabs type="border-card">
          <TableTree :addDataGenTab="addDataGenTab" :connectionItem="connectionItem"></TableTree>
        </el-tabs>
      </el-col>

      <!--数据生成页面-->
      <el-col :span="20">
        <el-tabs type="border-card">
          <data-generate :tableInfo="currentRightClickNodeData" :connectionItem="connectionItem"
                         :transTableDataArray="getTableDataArray"></data-generate>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DataGenerate from "@/views/data-generate/DataGenerate.vue";
import TableTree from "@/views/data-generate/TableTree.vue";

export default {
  name: "DataSourceOperate",
  props: {
    connectionItem: Object
  },
  components: {
    DataGenerate: DataGenerate,
    TableTree: TableTree,

  },
  data() {
    return {
      //右侧点击数据生成的表
      currentRightClickNodeData: {},
      //子组件待生成的表结构数组
      tableDataArray: []
    }
  },
  methods: {
    //添加表结构到数据生成选项卡
    addDataGenTab(node) {
      //查询新添加的表是否已经在tableDataArray中存在
      const tableName = node.tableName;
      for (let i = 0; i < this.tableDataArray.length; i++) {
        let table = this.tableDataArray[i];
        if (table[0].tableName === tableName) {
          this.$message.warning("不能选择重复的表进行数据生成");
          return
        }
      }
      //如果tableDataArray中不存在将点击的node信息传递给子组件
      this.currentRightClickNodeData = node
    },

    //获取子组件待生成的表结构数组
    getTableDataArray(array) {
      this.tableDataArray = array
    }
  }
}
</script>

<style>

</style>